<template>
    <div id="MyAgentNew">
      <div class="SQList">
        <template v-if="$store.state.isGJ">
          <van-tabs type="card" color="#007DFB" title-inactive-color="#000" :border="false" title-active-color="#fff"
            background="#fff">
            <van-tab v-for="(item, index) in VanTab" :key="index"
              :title-style="{ 'border': 'none', 'border-right': '2px solid #f6f6f6', 'padding': '10px 0', 'font-size': '16px' }"
              :title="item.name">
              <div class="contant">
                <!-- <keep-alive> -->
                  <component :is="item.com" :typeName="item.name"></component>
                <!-- </keep-alive> -->1
              </div>
            </van-tab>
          </van-tabs>
        </template>
        <template v-else>
          <div class="contant">
            <BuildingApplication></BuildingApplication>
          </div>
        </template>

        <!-- <ul>
          <li v-for="(item, index) in contentData1" :key="index" v-if="item.show" @click="contentDataClick1(item)">
            <p style="font-weight: bold; line-height: 60px">
              <img :src="item.img" alt="" style="display: block; float: left; width: 44px; height: 44px; margin: 6px" />
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; margin-left: 2px; color: red; font-size: 20px">{{ item.num }}</span>
            </p>
          </li>
        </ul> -->
      </div>
      <div class="bottom">
        <ul>
          <li :key="index" v-for="(item, index) in bottomData" @click="bottomClick(index)"
            v-show="($store.state.isGJ && (item.name === '首页' || item.name === '我的待办' || item.name === '我的收藏')) || (!$store.state.isGJ && (item.name === '首页' || item.name === '我的待办'))"
            :style="{
              color: nowIndex === index ? '#007AFF' : '#908f94',
              fontSize: '18px',
              width: $store.state.isGJ ? '33.3%' : '50%'
            }">
            <img v-if="nowIndex === index" :src="item.icon" />
            <img v-else :src="item.icons" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>
  </template>

  <script>
  import BuildingApplication from "@/components/ZLJ/BuildingApplication";
  import RebuildList from "@/components/ZLJ/WYWG/RebuildList";
  import BrandApplication from "@/components/ZLJ/BrandApplication";
  import mySGXKSQ from "@/components/ZLJ/shigongxuke/mySGXKSQ";
  export default {
    name: 'MyAgentNew',
    data() {
      return {
        nowIndex: 1,
        VanTab: [
          {
            name: '建房申请',
            com: BuildingApplication,
          },
          {
            name: '危改申请',
            com: RebuildList,
          },
          {
            name: '门牌申请',
            com: BrandApplication,
          },
          {
            name: '施工备案证',
            com: mySGXKSQ,
          }
        ],
        bottomData: [
          {
            name: '首页',
            icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20.png',
            icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20-1.png'
          },
          {
            name: '我的待办',
            icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21.png',
            icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21-1.png'
          },
          {
            name: '我的收藏',
            icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/22.png',
            icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/22-1.png'
          }
        ]
      }
    },
    components: {
      BuildingApplication,
      RebuildList,
      BrandApplication
    },
    methods: {
      bottomClick(index) {
        switch (index) {
          case 0:
            this.$router.push({
              path: '/ZLJIndex'
            })
            break
          case 1:
            //获取数据长度
            // this.getcontentData();
            this.$router.push({
              path: 'MyAgentNew'
            })
            break
          case 2:
            this.$router.push({
              path: 'MyEnshrine'
            })
            break
        }
      }
    },
    mounted() {
      if (ZWJSBridge) {
        ZWJSBridge.setTitle({
          title: '我的待办'
        })
          .then((res) => { })
          .catch((err) => { })
      }
    }
  }
  </script>

  <style scoped lang="scss">
  #MyAgentNew {
    height: 100vh;
    font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
    font-size: 14px;
    background: #f6f6f6;

    .SQList {
      width: 100vw;
      height: calc(100vh - 68px);
      overflow: auto;
    }

    .bottom {
      clear: both;
      // position: fixed;
      bottom: 0;
      // height: 100px;
      width: 100%;
      text-align: center;
      background: #ffffff;
      border-top: 1px solid #d2d2d2;

      ul {
        width: 100%;
        height: 100%;
        clear: both;
        overflow: hidden;
        display: flex;
        height: 68px;
        // align-items: center;
        margin-top: 4px;

        li {
          float: left;
          width: 33.3%;
          font-size: 14px !important;

          img {
            height: 16px;
            margin-bottom: 3px;
          }
        }
      }
    }
  }
  </style>
  <style lang="scss">
  #MyAgentNew {
    .van-tabs--card {
      width: 100%;
      height: 100%;
      padding-top: 1px;

      .van-tabs__wrap {
        height: 40px;
        margin: 10px 0;
      }

      .van-tabs__nav--card {
        border-radius: 5px;
        overflow: hidden;
        height: 100%;
        border: none;
      }

      .van-tab:last-child {
        border-right: none;
      }

      .van-tabs__content {
        height: calc(100% - 60px);
      }

      .van-tab__pane {
        height: 100%;
      }
    }

    .contant {
      height: 100vh;
      background-color: #ffffff;
      // overflow: auto;
      touch-action: auto !important;
      .listWrap {
        padding: 0 10px;

        li {
          background-color: #fff;
          margin: 0 auto;
          padding-bottom: 10px;
          border-bottom: 1px solid #D2D2D2;
          clear: both;
          overflow: hidden;

          .p1 {
            font-size: 18px;
            font-weight: 1000;
            color: #1A1A1A;
            line-height: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span:last-child {
              font-size: 14px !important;
            }
          }

          .p3 {
            font-size: 14px;
            color: #848484;
            line-height: 24px;
            clear: both;
            overflow: hidden;
          }
        }
      }

      .van-tabs {
        height: 100%;
      }

      .van-tabs--card {
        height: 100%;
      }

      .van-tabs__wrap {
        margin: 0 !important;
      }

      .van-tab__text {
        font-size: 16px;
      }

      .van-tab {
        color: #000000;
      }
    }
  }
  </style>
